
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>原材料类型</title>
    <script src="../../../res/js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="../../../res/layui/css/pulas.css" media="all">
</head>
<body>
<style>
    .layui-table-body {
        position: relative;
        overflow: auto;
        margin-right: -1px;
        margin-bottom: -1px;
        font-family: monospace;
    }
</style>
<div class="demoTable">
    <div class="layui-inline">
        <input class="labtna" name="typeName" id="typeName" autocomplete="off" placeholder="输入关键字">
    </div>

    <button class="latn" id="materialsAdd" data-type="add">增加</button>
</div>
<table class="layui-hide" id="materials" lay-filter="demo"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" id="imgUpdate">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/javascript" src="../../../res/js/base.js"></script>
<script src="../../../res/layui/layui.js"></script>
<script src="../../../res/js/treeGrid.js"></script>
<script>

    var openindex=null;
    var table=null;
    var treeGrid=null;
    var ptable=null,treeGrid=null,tableId='materials',layer=null;
    layui.config({
        base: '/res/js/'
    }).extend({
        treeGrid:'treeGrid'
    }).use(['jquery','treeGrid','layer','table','form'], function(){
        var $=layui.jquery;
        treeGrid = layui.treeGrid;  //很重要
        layer = layui.layer;
        form  = layui.form;
        table = layui.table;
        ptable=treeGrid.render({
            id:tableId
            ,elem: '#'+tableId
            ,idField:'typeId'//必須字段
            ,treeId:'typeId'//树形id字段名称
            ,treeUpId:'typeId2'//树形父id字段名称
            ,treeShowName:'typeName'//以树形式显示的字段
            ,isOpenDefault:true//节点默认是展开还是折叠【默认展开】
            ,url: '/hqRawmaterialType/selectAe' //数据接口
            ,method:'post'
            ,height:'100%'
            ,isFilter:false
            ,iconOpen:true//是否显示图标【默认显示】
            ,loading:true
            ,isPage:false
            ,cols: [[ //表头
                {type:'checkbox', fixed: 'left'},
                 {field:  'fname', title: '上级类型', width:120, fixed: 'left'}
                ,{field:  'typeName', title: '材料类型名称' }
                ,{fixed: 'right',title: '操作', width: 225, align:'center', toolbar: '#barDemo'}
            ]]
            ,id: 'testReload'
        });

        //监听工具条
            treeGrid.on('tool()', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                var matId=data.typeId;
                layer.confirm('确认删除？', function(index){
                    layer.close(index);
                    var url = "/hqRawmaterialType/delete";
                    var data={id:matId};
                    $.post(url,data,function(mes){
                        layer.msg(mes.message);
                       if (mes.status==1){
                           treeGrid.reload('testReload');
                       }
                    },"json");
                });
            } else if(layEvent === 'edit'){
                layer.open({
                    type: 	2,
                    area : ['55%' , '65%'],//弹出框大小
                    shift:1,//弹出框动画效果
                    content: ['mattypes.html','on'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    success:function(layero,index){
                        var body = layer.getChildFrame('body',index);//确定两个页面之间的父子关系
                        var iframeWin = window[layero.find('iframe')[0]['name']];//子页面对象
                        body.find("#typeId").val(data.typeId);
                        body.find("#fname").val(data.typeId2);
                        body.find("#typeName").val(data.typeName);
                    }
                });
            }
        });　

        //条件查询
        var $ = layui.$;

        $('#materialsAdd').on('click', function(){
            layer.open({
                type: 	2,
                area : ['55%' , '55%'],//弹出框大小
                shift:1,//弹出框动画效果
                content: ['mattypes.html','on'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        });
    });



    $(function () {
        $('#typeName').bind('input propertychange', function() {
            var typeName = $('#typeName');
            //执行重载
            treeGrid.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    typeName: typeName.val()
                }
            });
        });
    })

</script>
</body>
</html>